<template>
  <div class="main-box">
    <div class="top-bg">
      <img class="img-part" :src="topBg" />
      <div class="top-main">
        <div class="flex-left">
          <img class="top-title-icon" :src="topTitleIcon" />下载专区
        </div>
        <div class="flex-right">
          <div class="search-part">
            <el-input
              size="44px"
              placeholder="请输入关键词"
              v-model="search"
              class="input-with-select"
            >
              <div slot="append" class="button-part">搜索</div>
            </el-input>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topBg from "../../../img/top-bg.png";
import topTitleIcon from "../../../img/xiazai/top-title-icon.png";
export default {
  data() {
    return {
      topBg,
      topTitleIcon,
      search: "",
    };
  },
};
</script>

<style lang="less" scoped>
.main-box {
  //   position: sticky;
  //   top: 0;
  margin-top: -81px;
  width: 100%;
  display: flex;
  justify-content: center;
  .top-bg {
    position: relative;
    width: 100%;
    height: 190px;
    //
    display: flex;
    justify-content: center;
    .top-main {
      position: absolute;
      bottom: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      //   padding: 0 360px;
      //   width: calc(100% - 720px);
      width: 1200px;
      height: 44px;
      .flex-left {
        display: flex;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #ffffff;
        line-height: 30px;
        .top-title-icon {
          margin-right: 12px;
          width: 19px;
          height: 28px;
        }
      }
      .flex-right {
        .search-part {
          //   margin-top: 56px;
          width: 100%;
          display: flex;
          justify-content: center;
          .button-part {
            display: flex;
            align-items: center;
            justify-content: center;
            padding-left: 16px;
            letter-spacing: 16px;
            // width: 86px;
            width: 70px;
            height: 44px;
            background: linear-gradient(90deg, #ff905a 0%, #ec930a 100%);
            border-radius: 0px 0px 0px 0px;
            opacity: 1;
            font-size: 16px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.img-part {
  width: 100%;
  height: 100%;
}
::v-deep {
  .el-select .el-input {
    width: 130px;
  }

  .el-input-group {
    line-height: normal;
    display: inline-table;
    width: 375px;
    border-collapse: separate;
    border-spacing: 0;
  }
  .el-input-group--append .el-input__inner,
  .el-input-group__prepend {
    border: none;
    border-radius: 0;
    height: 44px;
  }
  .el-input-group__append {
    border-left: 0;
    padding: 0;
    border: none;
  }
  //   输入框-已输入文字
  .el-input__inner {
    font-size: 16px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #333;
  }
  //   placeholder属性
  .el-input__inner::placeholder {
    font-size: 16px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #cccccc;
    // text-align: center;
  }
  /* 谷歌 */
  .el-input__inner::-webkit-input-placeholder {
    font-size: 16px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #cccccc;
  }
  /* 火狐 */
  .el-input__inner:-moz-placeholder {
    font-size: 16px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #cccccc;
  }
  /*ie*/
  .el-input__inner:-ms-input-placeholder {
    font-size: 16px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #cccccc;
  }
}
</style>